import { ref, onMounted, watch, computed } from 'vue';
// 导入Element Plus消息提示和加载组件，用于用户操作反馈和加载状态显示
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
// 导入用户管理API服务，实现业务逻辑与数据请求分离
// 采用服务层模式便于统一维护API调用和错误处理
import allUserApi from '@/api/Backend/AllUserApi';
import type { Ref } from 'vue';

// 用户数据接口定义，明确数据结构确保类型安全
// 接口字段与后端返回保持一致，便于类型检查和自动补全
interface User {
  userId: number;
  userName: string;
  nickname: string;
  password?: string;  // 密码字段可选，列表展示时不需要
  contact: string;
  avatarUrl: string;
  roleId: number;     // 角色ID，1:超级管理员, 2:讲师, 3:学生
  creator?: string;
  isDelete: string;   // 保留此字段用于数据筛选，但不在表格展示
  deleteTime?: string; // 保留此字段用于数据筛选，但不在表格展示
  updateTime?: string;
  updater?: string;
}

// 新增学员表单数据接口，继承User并设置必填项
// Omit排除不需要的系统字段，确保新增操作只传递必要数据
interface NewUser extends Omit<User, 'userId' | 'isDelete' | 'deleteTime' | 'updateTime' | 'updater' | 'creator'> {
  password: string;  // 新增用户时密码为必填项
  roleId: 3;         // 强制角色ID为3(学员)
}

/**
 * 学员管理组合式函数
 * 将学员管理相关的状态和方法封装，实现逻辑与视图分离
 * 便于代码维护和复用，同时符合Vue3的组合式API最佳实践
 */
export function useStudentUser(selectedUsers: Ref<User[]>) {
  // 存储学员列表数据
  // 使用泛型ref确保类型安全，初始值设为空数组避免undefined问题
  const userList = ref<User[]>([]);

  // 控制添加学员对话框的显示与隐藏
  // 使用boolean类型ref提供响应式状态管理
  const showAddDialog = ref(false);

  // 控制编辑学员对话框的显示与隐藏
  const showEditDialog = ref(false);

  // 存储新增学员的数据
  // 使用NewUser接口约束数据结构，确保必填字段不缺失
  const newUser = ref<NewUser>({
    userName: '',
    nickname: '',
    password: '',
    contact: '',
    avatarUrl: '',
    roleId: 3  // 固定角色ID为3，表示学员
  });

  // 存储正在编辑的学员数据
  // 使用Partial<User>允许部分更新，适应编辑场景
  const editingUser = ref<Partial<User>>({});

  // 存储搜索关键词
  const searchKeyword = ref('');

  // 分页相关状态
  // 这些状态共同控制表格分页，初始值符合用户常见使用习惯
  const currentPage = ref(1);      // 当前页码，默认为1
  const pageSize = ref(10);        // 每页条数，默认10条
  const total = ref(0);            // 总记录数，初始为0

  /**
   * 计算当前页数据
   * 使用computed属性自动响应依赖变化，避免手动调用更新
   * 实现客户端分页，减轻服务器压力并提升前端响应速度
   */
  const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return userList.value.slice(start, end);
  });

  /**
   * 日期格式化函数
   * 将ISO日期字符串转换为本地格式，+8小时修正时区差异
   * 统一日期显示格式，提升用户体验
   */
  const formatDate = (dateStr: string) => {
    if (!dateStr) return '';  // 处理空日期情况，避免报错
    const date = new Date(dateStr);
    // 加8小时是因为后端返回的时间可能是UTC时间，需要转换为东八区时间
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours() + 8).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
  };

  /**
   * 根据roleId获取角色名称
   * 支持三种角色类型显示，便于用户直观理解角色含义
   * 代替直接显示数字ID，提升用户体验
   */
  const roleName = (roleId: number): string => {
    switch(roleId) {
      case 1: return '超级管理员';
      case 2: return '讲师';
      case 3: return '学生';
      default: return '未知角色';
    }
  };

  /**
   * 根据roleId获取标签类型(颜色)
   * 为不同角色提供直观的颜色区分，增强视觉识别性
   * 红色: 超级管理员，蓝色: 讲师，绿色: 学生
   */
  const roleType = (roleId: number): string => {
    switch(roleId) {
      case 1: return 'danger'; // 超级管理员-红色
      case 2: return 'primary'; // 讲师-蓝色
      case 3: return 'success'; // 学生-绿色
      default: return 'default';
    }
  };

  /**
   * 获取学员列表数据
   * 组件挂载时自动调用，初始化表格数据
   * 只获取role_id=3且未删除(is_delete=0)的用户数据
   * 使用try/catch捕获网络异常，增强应用健壮性
   */
  const fetchUsers = async () => {
    try {
      // 使用API服务获取所有用户数据
      const res = await allUserApi.getUserList();
      // 严格验证响应格式，防止后端返回异常数据导致前端崩溃
      if (res && res.code === 200 && Array.isArray(res.data)) {
        // 筛选出角色ID为3的学员数据，并且排除已删除(is_delete=1)的数据
        // 双重过滤确保只显示有效学员信息，符合软删除业务逻辑
        userList.value = res.data.filter((user: any) => 
          user.roleId === 3 && user.isDelete === '0'
        );
        total.value = userList.value.length;
      } else {
        // 数据格式异常时给予用户明确提示
        ElMessage.warning('学员数据格式异常');
        userList.value = [];
        total.value = 0;
      }
    } catch (error) {
      console.error('获取学员列表失败:', error);
      ElMessage.error('获取学员列表失败，请刷新页面重试');
    }
  };

  /**
   * 实际执行删除操作的内部方法
   * 封装删除API调用逻辑，供单个删除和批量删除共用
   * 不包含确认对话框，由调用方处理确认逻辑
   */
  const _doDeleteUser = async (id: number): Promise<boolean> => {
    try {
      const res = await allUserApi.deleteUser(id);
      if (res && res.code === 200) {
        return true;
      } else {
        ElMessage.error(`删除失败: ${res?.msg || '未知错误'}`);
        return false;
      }
    } catch (error) {
      console.error(`删除ID为${id}的学员失败:`, error);
      ElMessage.error(`删除ID为${id}的学员失败`);
      return false;
    }
  };

  /**
   * 添加学员
   * 通过API服务提交新学员数据
   * 成功后重置表单、关闭对话框并刷新列表，提供完整的用户反馈流程
   */
  const addUser = async () => {
    try {
      // 前端基础验证，避免无效请求
      if (!newUser.value.userName.trim()) {
        ElMessage.warning('用户名不能为空');
        return;
      }
      if (!newUser.value.password.trim()) {
        ElMessage.warning('密码不能为空');
        return;
      }

      // 强制设置角色ID为3(学员)，防止前端篡改
      newUser.value.roleId = 3;

      // 调用API服务添加学员
      const res = await allUserApi.addUser(newUser.value);
      if (res && res.code === 200) {
        showAddDialog.value = false;  // 关闭对话框
        resetNewUser();               // 重置表单
        fetchUsers();                 // 刷新学员列表
        ElMessage.success('学员添加成功');
      } else {
        ElMessage.error('添加失败: ' + (res?.msg || '未知错误'));
      }
    } catch (error) {
      console.error('添加学员失败:', error);
      ElMessage.error('添加学员失败，请稍后重试');
    }
  };

  /**
   * 重置新增学员数据
   * 将表单恢复到初始状态，避免残留数据影响下次使用
   * 在添加成功或取消添加时调用
   */
  const resetNewUser = () => {
    newUser.value = {
      userName: '',
      nickname: '',
      password: '',
      contact: '',
      avatarUrl: '',
      roleId: 3  // 重置时保持角色ID为3
    };
  };

  /**
   * 删除单个学员
   * 使用确认对话框防止误操作
   * 通过API服务调用软删除接口，而非物理删除
   */
  const deleteUser = async (id: number) => {
    try {
      // 使用Element Plus确认对话框，提供更好的用户体验
      // 二次确认防止误删除重要数据
      const confirmResult = await ElMessageBox.confirm(
        '确定要删除该学员吗？此操作不可撤销',
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      );

      if (confirmResult === 'confirm') {
        const success = await _doDeleteUser(id);
        if (success) {
          fetchUsers();  // 刷新学员列表，已删除数据将被自动过滤
          ElMessage.success('学员删除成功');
        }
      }
    } catch (error) {
      // 用户取消操作时不显示错误提示
      if (error !== 'cancel') {
        console.error('删除学员失败:', error);
        ElMessage.error('删除学员失败，请稍后重试');
      }
    }
  };

  /**
   * 批量删除选中的学员
   * 一次性确认后逐个调用删除接口
   * 使用加载状态防止重复操作，提高用户体验
   */
  const handleBatchDelete = async () => {
    if (selectedUsers.value.length === 0) {
      ElMessage.warning('请先选择要删除的学员');
      return;
    }

    try {
      // 显示批量删除确认对话框，明确告知删除数量
      const confirmResult = await ElMessageBox.confirm(
        `确定要删除选中的${selectedUsers.value.length}位学员吗？此操作不可撤销`,
        '批量删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          draggable: true
        }
      );

      if (confirmResult === 'confirm') {
        // 显示加载状态，防止用户重复操作
        const loading = ElLoading.service({
          lock: true,
          text: '正在删除...',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        try {
          // 存储成功和失败的ID，用于结果反馈
          const successIds: number[] = [];
          const failIds: number[] = [];

          // 逐个调用删除接口，确保后端能正确处理单个请求
          // 使用for...of循环而非forEach，确保异步操作顺序执行
          for (const user of selectedUsers.value) {
            const success = await _doDeleteUser(user.userId);
            if (success) {
              successIds.push(user.userId);
            } else {
              failIds.push(user.userId);
            }
          }

          // 刷新用户列表
          await fetchUsers();

          // 清空选中状态
          selectedUsers.value = [];

          // 显示批量操作结果
          if (successIds.length > 0 && failIds.length === 0) {
            ElMessage.success(`成功删除${successIds.length}位学员`);
          } else if (successIds.length > 0 && failIds.length > 0) {
            ElMessage.warning(`部分删除成功: ${successIds.length}位成功, ${failIds.length}位失败`);
          } else {
            ElMessage.error('批量删除失败');
          }
        } finally {
          // 无论成功失败，都关闭加载状态
          loading.close();
        }
      }
    } catch (error) {
      // 用户取消操作时不显示错误提示
      if (error !== 'cancel') {
        console.error('批量删除失败:', error);
        ElMessage.error('批量删除失败，请稍后重试');
      }
    }
  };

  /**
   * 编辑学员
   * 深拷贝学员数据到编辑对象，避免直接修改原数据
   * 打开编辑对话框并填充表单数据
   */
  const editUser = (user: User) => {
    // 使用展开运算符深拷贝对象，防止双向绑定导致的实时更新
    // 避免用户尚未确认保存却已在列表中看到临时修改
    editingUser.value = { ...user };
    showEditDialog.value = true;
  };

  /**
   * 更新学员
   * 通过API服务提交更新后的学员数据
   * 成功后关闭对话框并刷新列表
   */
  const updateUser = async () => {
    try {
      // 前端基础验证
      if (!editingUser.value?.userName?.trim()) {
        ElMessage.warning('用户名不能为空');
        return;
      }

      // 强制保持角色ID为3，防止修改为其他角色
      if (editingUser.value) {
        editingUser.value.roleId = 3;
      }

      const res = await allUserApi.updateUser(editingUser.value);
      if (res && res.code === 200) {
        showEditDialog.value = false;
        fetchUsers();
        ElMessage.success('学员更新成功');
      } else {
        ElMessage.error('更新失败: ' + (res?.msg || '未知错误'));
      }
    } catch (error) {
      console.error('更新学员失败:', error);
      ElMessage.error('更新学员失败，请稍后重试');
    }
  };

  /**
   * 搜索学员
   * 根据关键词筛选学员数据
   * 支持按用户名、昵称或联系方式搜索
   */
  const searchUsers = async () => {
    try {
      const keyword = searchKeyword.value.trim();
      if (keyword) {
        // 调用搜索API
        const res = await allUserApi.searchUsers(keyword);
        if (res && res.code === 200 && Array.isArray(res.data)) {
          // 搜索结果中筛选出学员(roleId=3)且未删除(is_delete=0)的数据
          // 保持与fetchUsers方法一致的筛选逻辑
          userList.value = res.data.filter((user: any) => 
            user.roleId === 3 && user.isDelete === '0'
          );
        } else {
          ElMessage.warning('搜索结果格式异常');
          userList.value = [];
        }
      } else {
        // 如果关键词为空，加载全部学员
        await fetchUsers();
      }
      total.value = userList.value.length;
      currentPage.value = 1;  // 搜索后重置到第一页
    } catch (error) {
      console.error('搜索学员失败:', error);
      ElMessage.error('搜索失败，请重试');
    }
  };

  /**
   * 处理每页数量变化
   * 当每页条数改变时，重置到第一页
   * 避免因条数变化导致的页码超出范围问题
   */
  const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
    currentPage.value = 1;
  };

  /**
   * 处理当前页变化
   * 更新当前页码，触发currentPageData重新计算
   */
  const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
  };

  /**
   * 监听搜索关键词变化
   * 实现实时搜索功能，提升用户体验
   * 为空时自动加载全部数据
   */
  watch(searchKeyword, (newVal) => {
    // 使用debounce可以优化性能，但此处为保持简单直接调用
    if (newVal.trim()) {
      searchUsers();
    } else {
      fetchUsers();
    }
  });

  /**
   * 组件挂载时执行
   * 初始化加载学员列表数据
   */
  onMounted(() => { fetchUsers(); });

  // 导出所有需要在模板中使用的状态和方法
  // 采用对象解构方式，便于在模板中按需导入
  return {
    // 状态变量
    userList,
    showAddDialog,
    showEditDialog,
    newUser,
    editingUser,
    searchKeyword,
    currentPage,
    pageSize,
    total,
    currentPageData,

    // 方法
    formatDate,
    fetchUsers,
    addUser,
    resetNewUser,
    deleteUser,
    editUser,
    updateUser,
    searchUsers,
    handleSizeChange,
    handleCurrentChange,
    roleName,  // 导出角色名称映射方法
    roleType,  // 导出角色类型(颜色)映射方法
    handleBatchDelete // 导出批量删除方法
  };
}